<!doctype html>
<html lang='en' xmlns:th='http://www.thymeleaf.org'>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"/>
        <!-- 图标 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
        <!-- UIkit CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css"/>
        <title>用户登录</title>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            body {
                background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
            }

            .login-content {
                margin: 0 auto; /*水平居中*/
                position: relative;
                top: 45%; /*偏移*/
                transform: translateY(-50%);
            }

            .form-signin {
                max-width: 380px;
                background-color: #fff;
                margin: 0 auto;
                padding: 15px 40px 50px;
                border: 1px solid #e5e5e5;
                border-radius: 10px;
            }

            .form-signin .form-signin-heading, .form-signin input[type="password"] {
                margin-bottom: 30px;
            }

            .form-signin input[type="text"] {
                margin-bottom: 20px;
            }

            .form-signin .form-control {
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="login-content">
            <div class="form-signin shadow">
                <h2 class="form-signin-heading text-center"><i class="fas fa-user"></i> 用户登录 </h2>
                <input type="text" class="form-control" id="name" placeholder="请输入用户名" required autofocus
                       autocomplete="off" th:value="${session.USER == null} ? '':${session.USER.name}">
                <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
                <button id="login-btn" class="btn btn-lg btn-primary btn-block">登录</button>
                <div class="dropdown-divider"></div>
                <div class="text-center">
                    <a th:href="@{/register}" href="#" class="btn btn-link text-decoration-none">去注册</a>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-link text-decoration-none">忘记密码？去找回</a>
                </div>
            </div>
        </div>

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src='https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js'></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
        <script th:src="@{/static/js/bootstrapQ.js}" src="../../static/js/bootstrapQ.js"></script>
        <script th:inline="javascript">
            /* 用户登录 */
            $('#login-btn').click(function () {
                // 上一个页面
                let retUrl = /*[[${retUrl}]]*/'';

                let req = {};
                req.name = $.trim($('#name').val());
                req.password = $.trim($('#password').val());

                if (req.name.length === 0) {
                    // success，info(默认)，warning，danger
                    bootstrapQ.msg({msg: '用户名不得为空!', type: 'warning', time: 2000});
                    return;
                }

                $.ajax({
                    url: /*[[@{/login.do}]]*/'',
                    method: 'POST',
                    data: JSON.stringify(req),
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: function (resp) {
                        if (resp.success) {
                            if (retUrl.length > 0) {
                                // 跳转到上一个页面
                                location.href = retUrl;
                            } else {
                                // 跳转到首页
                                location.href = /*[[@{/}]]*/'';
                            }
                        } else {
                            bootstrapQ.msg({msg: resp.message, type: 'warning', time: 2000});
                            // 清空用户输入
                            $('#name').focus();
                            $('#password').val('');
                        }
                    },
                    error: function () {
                        bootstrapQ.msg({msg: '网络异常', type: 'warning', time: 2000});
                    }
                });
            })
        </script>
    </body>
</html>